<template>
  <div>
    <!-- 审批意见:rzSpyj-->
    <div class="w_100 headTips d_f j_c_s_b">
      <div class="d_f a_i_c">
        <div class="line"></div>
        {{ name }}
      </div>
      <div class="isClose" @click="close">
        <el-icon v-if="type == 'smallForm'">
          <CloseBold />
        </el-icon>
      </div>
      <el-switch v-if="type == 'bigForm'" @change="change" v-model="status" style="--el-switch-on-color: #13ce66;" />
      <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
    </div>
    <div class="formBox rzSpyj">
      <div class="fzRzYwxx_form1">
        <myform :fields="fields" ref="form1" :rules="rules" :model="model.inspect" :options="options" class="m_t_16">
          <template v-slot:auditStatus>
            <div class="d_f w_100 j_c_s_b" v-if="type != 'smallForm'">
              <div class=" p_r" :class="model.inspect.auditStatus == 2 ? 'success_btn' : 'default_btn'"
                @click="changeStatus(2)">
                <img src="../../assets/formsSuccess.png" alt="" v-if="model.inspect.auditStatus == 2">
                <img src="../../assets/formSuccess1.png" alt="" v-else>
                <span class="m_l_10">同意</span>
                <img src="../../assets/formSelected1.png" alt="" class="formSelected"
                  v-if="model.inspect.auditStatus == 2">
              </div>
              <div class=" p_r" :class="model.inspect.auditStatus == 3 ? 'error_btn' : 'default_btn'"
                @click="changeStatus(3)">
                <img src="../../assets/formError.png" alt="" v-if="model.inspect.auditStatus == 3">
                <img src="../../assets/formError1.png" alt="" v-else>

                <span class="m_l_10">拒绝</span>
                <img src="../../assets/formSelected.png" alt="" class="formSelected"
                  v-if="model.inspect.auditStatus == 3">
              </div>
            </div>
            <div class="d_f w_100 j_c_s_b" v-else>
              <div class=" p_r" :class="model.inspect.auditStatus == 2 ? 'default_btn1' : 'default_btn'"
                >
                <img src="../../assets/detail_success.png" class="formError" alt="" v-if="model.inspect.auditStatus == 2">
                <img src="../../assets/formSuccess1.png" class="formError" alt="" v-else>
                <span class="m_l_10">同意</span>
                <img src="../../assets/detail_god.png" alt="" class="formSelected"
                  v-if="model.inspect.auditStatus == 2">
              </div>
              <div class=" p_r" :class="model.inspect.auditStatus == 3 ? 'default_btn1' : 'default_btn'"
                >
                <img src="../../assets/detail_error.png" class="formError" alt="" v-if="model.inspect.auditStatus == 3">
                <img src="../../assets/formError1.png" class="formError" alt="" v-else>

                <span class="m_l_10">拒绝</span>
                <img src="../../assets/detail_god.png" alt="" class="formSelected"
                  v-if="model.inspect.auditStatus == 3">
              </div>
            </div>
          </template>
        </myform>
      </div>
      <div class="segment" v-if="fields1.length > 0"></div>
      <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
        <img src="../../assets/formArrow.png" alt="">
        <span>{{ subTitle || '新加字段' }}</span>
      </div>
      <div v-if="fields1.length > 0">
        <myform :fields="fields1" :model="model.inspect" :options="options" class="m_t_16">
        </myform>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import { copy, } from '../../utils/date'
import { useRouter } from 'vue-router'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { Message } from '../../utils/resetMessage'
import { listByParentArr } from '../../api/login'
import { rzSpyjType } from './data'
const model = {
  inspect: {
    auditStatus: '',
    approvalRemark: '',
    isReview: 1
  }
}
export default defineComponent({
  name: '',
  props: {
    type: {
      type: String,
      default: '',
    },
    unitId: {
      type: [String, Number],
      default: '',
    },
    isEnabled: {
      type: Number,
      default: '',
    },
    nodeObj: {
      type: Object,
      default: {}
    },
    vars: {
      type: Object,
      default: {}
    },
    isAudit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    CloseBold
  },
  setup(props: any) {
    const data: rzSpyjType = reactive({
      name: '审批意见',
      subTitle: '',
      model: copy(model),
      status: true,
      options: {},
      fields: [
        {
          label: '结论',
          prop: 'auditStatus',
          labelWidth: '150px',
          disabled: false,
        },
        {
          label: "审批意见说明",
          prop: 'approvalRemark',
          type: 'textarea',
          placeholder: '请输入审批意见说明',
          labelWidth: '150px',
          disabled: false,
        }
      ],
      fields1: [],
      rules: {
        auditStatus: [
          { required: true, message: '请选择结论', trigger: 'blur' },
        ],
        // approvalRemark: [
        //   { required: true, message: '请输入审批意见说明', trigger: 'blur' },
        // ],
      },
      id: '',
      isReset: 2,
    })
    const router = useRouter()
    const form1 = ref()
    onBeforeMount(() => {
      methods.getData()
      data.status = props.isEnabled == 0 ? false : true
    })
    const methods = {
      close() {
        router.push('/system/flowPath/childForm/index')
      },
      //设置表单的启用跟停用
      change() {
        unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
          Message({ type: 'success', message: '设置成功' })
        }).catch(() => {
          data.status = !data.status
        })
      },
      //获取自定义表单
      getData() {
        formGet({ tag: 'rzSpyj' }).then((res: any) => {
          data.name = res.name
          data.id = res.id
          data.isReset = res.isReset
          if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
          data.subTitle = res.subTitle
          let formStruct = JSON.parse(res.formStruct)
          formStruct.formFields.map((item: any) => {
            data.model.inspect[item.prop] = ''
          })
          data.fields1 = formStruct.formFields

          if (props.type == 'smallForm') {
            data.fields.map((item: any) => {
              item.disabled = props.isAudit
            })
          }
          data.fields1.map((item: any) => {
              item.disabled = props.isAudit
            })
          if (props.vars) {
            const localData = props.vars
            for (let key in data.model.inspect) {
              if (localData.inspect[key] != null) {
                data.model.inspect[key] = localData.inspect[key]
              }
            }
            if (props.type == 'useForm') {
              data.model.inspect.approvalRemark = ''
              data.model.inspect.auditStatus = ''
            }
          }
          let arr = formStruct.formFields.filter((item: any) => {
            return item.type == 'select'
          })
          let ids = arr.map((item: any) => {
            return item.prop
          })
          if (ids.length == 0) return
          listByParentArr({ ids: ids }).then((res: any) => {
            ids.map((item: any) => {
              data.options[item] = res[item]
            })
          })
        })
      },
      //清除表单数据
      clearForm() {
        data.model = copy(model)
      },
      changeStatus(status: number | string) {
        data.model.inspect.auditStatus = status
      },
      resultData() {
        return new Promise((resolve, reject) => {
          form1.value.verification().then((res) => {
            resolve(data.model)
          }).catch(() => {
            reject(false)
          })
        })
      },
      saveData() {
        return new Promise((resolve, reject) => {
          resolve(data.model)
        })
      },
    }
    return {
      ...toRefs(data),
      ...methods, form1
    }
  }
})
</script>
<style lang='scss'>
.rzSpyj {
  .el-form-item {
    width: 100% !important;
    margin-right: 0px !important;

    .el-form-item__content {
      width: calc(100% - 150px) !important;

      .el-input,
      .el-cascader,
      .el-select {
        width: 100% !important;
      }
    }

  }
}
</style>